<template>
  <div style="padding: 10px;">
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="限时抢" name="first" style="padding-bottom: 60px;">
        <div
          v-for="(item, index) in configList"
          :key="index"
          style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;"
        >
          <el-form :ref="'form'+index" label-width="150px" size="mini" :rules="rules" :model="item" :disabled="item.disabled">
            <el-form-item label="选择优惠券">
              <el-input v-model="item.batchName" disabled placeholder=" 选择优惠券" style="width: 250px;">
                <template slot="append">
                  <el-button
                    v-if="!item.id"
                    @click="chooseCoupon(item,index)"
                    type="text"
                    size="small"
                    style="padding: 0 10px;"
                  > 选择优惠券</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="活动有效期" prop="date">
              <el-date-picker
                style=" width: 250px;"
                v-model="item.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="周期时间点" prop="beginTime">
              <el-time-picker style=" width: 250px;" v-model="item.beginTime" placeholder="周期时间点" value-format="HH:00:00" ></el-time-picker>
            </el-form-item>
            <el-form-item label="每日秒杀总数量" prop="totalNum">
              <el-input-number  style=" width: 250px;"  :min="1" v-model.number="item.totalNum" placeholder="每日秒杀总数量" />
            </el-form-item>
            <el-form-item label="每人可领券数量" prop="limitNum">
              <el-input-number  style=" width: 250px;"  :min="1" v-model.number="item.limitNum" placeholder="每人可领券数量" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="orderSrot">
              <el-input-number  style=" width: 250px;"  :min="1"  v-model.number="item.orderSrot" placeholder="显示顺序" />
            </el-form-item>
          </el-form>
          <div style="text-align: right;">
            <div style="padding: 10px 0;">
              <el-button type="primary" @click="save(item,index)">{{item.id && item.disabled ? '修改' : '保存'}}</el-button>
              <el-button @click="delRow(item.id,index)">删除</el-button>
            </div>
          </div>
        </div>
        <div
          @click="addMore"
          style="position: fixed; bottom: 0; left: 220px; right: 10px; height: 50px; background:#f2f2f2; text-align: center; line-height: 50px; cursor: pointer; z-index: 1000;"
        >
          <span style="font-size: 16px; color: '#999'">添加新券</span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="领券" name="second">
        <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
          <receive-coupon></receive-coupon>
        </div>
      </el-tab-pane>
    </el-tabs>
    <choice-coupon ref="choiceCouponDia" @select="selectCoupon"></choice-coupon>
  </div>
</template>

<script>
import { getCouponCenterConfigList, queryCouponList } from '@/api/coupon'
import { addTime,queryList,editTime,delTime } from '@/api/coupon/configcenter'
import ChoiceCoupon from './components/choice-coupon'
import ReceiveCoupon from './components/receive-coupon'
export default {
  name: "config-center",
  components: { ChoiceCoupon, ReceiveCoupon },
  data() {
    return {
      activeTab: "first",
      tableData: [],
      coupon:null,
      datas: [1],
      configList: [
        {
          id: "",
          couponsId: undefined,
          batchName: "",
          // 活动开始时间
          startTime: "",
          // 活动结束时间
          endTime: "",
          // 周期时间点？
          beginTime: "",
          // 每日秒杀总数量
          totalNum: undefined,
          // 每人可领券数量
          limitNum: undefined,
          // 显示顺序
          orderSrot: 0,
        },
       
      ],
       rules:{
          date: [{ required: true, message: "请选择活动有效期!",trigger:'change' }],
          beginTime: [{ required: true, message: "请选择周期时间点!",trigger:'change' }],
          totalNum: [{ required: true,  message: "请输入每日秒杀总数量!",}],
          limitNum: [{ required: true,  message: "请输入每人可领券数量!", }],
        },
      currentIndex:0,
      current:{},
     
    };
  },
  computed: {
    couponType() {
      return this.activeTab === "first" ? "0" : "1";
    },
  },
  methods: {
    handleClick(tab, event) {},
    // 选择优惠券
    chooseCoupon(item,index) {
      this.current = item
      this.currentIndex = index
      this.$refs.choiceCouponDia.visible = true
    },
    selectCoupon(item){
        const index = this.currentIndex
        this.configList[index].couponsId = item.couponsId
        this.configList[index].batchName = item.batchName
        this.configList[index].surplusNum = item.stockNum
    },
    addMore() {
      this.configList.push({
        id: "",
        couponsId: "",
        batchName: "",
        // 活动日期
        date:[],
        // 活动开始时间
        startTime: "",
        // 活动结束时间
        endTime: "",
        // 周期时间点？
        beginTime: "",
        // 每日秒杀总数量
        totalNum: 0,
        // 每人可领券数量
        limitNum: 0,
        // 显示顺序
        orderSrot: 0,
        // 表单是否禁用
        disabled: false
   
      });
    },
    // 保存
    async save(row,index){
      if(row.disabled){
         return row.disabled = false
      }
      try {
        await this.$refs['form'+index][0].validate()
        row.startTime = row.date[0]
        row.endTime = row.date[1]
        let res 
        if(row.id){
          res = await editTime(row)
        }else{
          console.log(row)
          res = await addTime(row)
        }
        if(res.code === 200){
           row.disabled = true

          if(!row.id){
              row.id = res.result
          }
          this.$message.success('保存成功')
        }else{
           this.$message.error(res.message)
        }
      } catch (error) {
        
      }
    },
    // 删除
    delRow(id,index){
      if(id){
        this.$confirm("确定要删除该优惠券吗？", "删除确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delTime(id).then(res => {
            if(res.code === 200){
              this.configList.splice(index,1)
              this.$message.success('删除成功')
            }else{
              this.$message.error(res.message)
            }
          })
        }).catch(e=>console.log(e));
      }else{
         this.configList.splice(index,1)
      }
     
    },
    getList() {
      queryList(1).then((res) => {
        if (res.code === 200 && res.result.length > 0) {
          this.configList = res.result.map(v=>{
            v.disabled = true
            if(v.startTime){
              v.date = [v.startTime,v.endTime]
            }
            return v
          })
          this.addMore()
        } else {
          // Todo
        }
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss">
.item-datepicker-wrapper {
  .el-date-editor {
    width: 250px !important;
  }
}
</style>